<template>
  <el-row class="flex-column my-page">
    <el-row class="page-header">
      <el-col :span="12" class="header-left">
        <span>全部客户</span>
      </el-col>
      <el-col :span="12" class="header-right">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-plus"
          @click="handleAdd"
        >新 增</el-button>
      </el-col>
    </el-row>

    <el-row class="page-container">
      这是一个table占位符
      <div style="padding-top: 100px;text-align: center;">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-edit"
          @click="handleEdit"
        >测试编辑</el-button>
      </div>
    </el-row>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component({
  name: 'allCustomer',
  components: {
  }
})
export default class AllCustomer extends Vue {
  private $router: any
  private $confirm: any
  private $message: any
  private pageLoading: boolean = false
  public mounted () {
    console.log('all customer mounted')
  }

  public handleEdit () {
    this.$router.push({
      path: '/index/customer/c_u',
      query: {
        from: 'all',
        _id: '9120eu092u1eeer21'
      }
    })
  }

  // 页面全局函数
  public handleAdd () {
    this.$router.push({
      path: '/index/customer/c_u',
      query: {
        from: 'all'
      }
    })
  }
  // endregion
}
</script>

<style lang="stylus" scoped>
  .my-page
    // margin-left 10px
    .page-header
      height 30px
      margin-bottom 20px
      .header-left
        font-size 18px
        font-weight 900
      .header-right
        text-align right
    .page-container
      flex 1
      border-radius 10px
      border 1px solid $border-main
      box-shadow 0px 0px 4px 0px #e0e6f0, 0px 1px 4px 0px #e0e6f0
      margin 0 2px 2px 0
      height calc(100% - 50px)
</style>
